<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" style="margin-left:20px" size="small" @click="openEdit()">{{ $t('organization.add_company') }}</el-button>
    <el-dialog v-if="dialogTableVisible" :visible.sync="dialogTableVisible" :title="$t('table.add')" width="30%" >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-position="right"
        
      >
        <el-form-item :label="$t('table.company')" prop="company">
          <el-input v-model="formData.company"  label="right" type="text"/>
        </el-form-item>
        <el-form-item align="right">
          <div >
            <el-button type="primary" size="small" @click="submitForm()">{{ $t('table.complete') }}</el-button>
            <el-button size="small" @click="closeDia()">{{ $t('table.cancel') }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import { add } from '@/api/organization_manage/organization_manage'

export default {
  props: {
    row_id: {
      type: Number,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      formData: {},
      rules: {
        company: [
          { required: true, message: this.$t('validation.company1'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    openEdit() {
      (this.formData = {})
      this.dialogTableVisible = true
    },
    submitForm() {
      add(store.getters.token, this.formData).then(res => {
        console.log(res, 'res')
        if (res.data.status) {
          this.$message.success(this.$t('table.add_complete'))
          this.dialogTableVisible = false
          this.$emit('getLists')
        } else {
          this.$message.error(this.$t('table.add_fail'))
        }
      })
    },

    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style scoped>
/* 取消输入框下边距 */
.el-form-item{
  margin-bottom: 15px;
}
</style>
